<template>
    <!-- col-11 -->
    <div class="row">
        <div class="col-1 d-flex justify-content-end">
            <strong>标签栏</strong>
        </div>
        <div class="col-2 d-flex justify-content-start">
            标签栏放在：
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-1  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="radio" name="screenLabelPosition" id="ScreenLabelPosition1"
                @click="ScreenClinkForSave({ label: { labelPosition: 1 } })" :value=1
                v-model="screenConsole.label.labelPosition">
            <label class="form-check-label" for="ScreenlabelPosition1">
                浏览器顶部
            </label>
        </div>
        <div class="col-3   d-flex justify-content-start">
            <input class="form-check-input" type="radio" name="screenLabelPosition" id="ScreenLabelPosition2"
                @click="ScreenClinkForSave({ label: { labelPosition: 2 } })" :value=2
                v-model="screenConsole.label.labelPosition">
            <label class="form-check-label" for="ScreenlabelPosition2">
                浏览器中部
            </label>
        </div>

    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="screenLabelShowOnlyOnActivated"
                id="screenLabelShowOnlyOnActivated" v-model="screenConsole.label.showOnlyOnActivated"
                @change="ScreenClinkForSave({ label: { showOnlyOnActivated: screenConsole.label.showOnlyOnActivated } })">
            <label class="form-check-label" for="screenLabelShowOnlyOnActivated">
                仅在激活的标签上显示关闭按钮
            </label>
        </div>
    </div>



    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>工具栏</strong>
        </div>
        <div class="col-2 d-flex justify-content-start ">
            <div class="col-5   d-flex justify-content-start">
                <input class="form-check-input" type="checkbox" name="screenToolsShowAvatarTitle"
                    id="screenToolsShowAvatarTitle" v-model="screenConsole.tools.showAvatarTitle"
                    @change="ScreenClinkForSave({ tools: { showAvatarTitle: screenConsole.tools.showAvatarTitle } })">
                <label class="form-check-label" for="screenToolsShowAvatarTitle">
                    显示头像
                </label>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="screenToolsShowHomeButton"
                v-model="screenConsole.tools.showHomeButton"
                @change="ScreenClinkForSave({ tools: { showHomeButton: screenConsole.tools.showHomeButton } })">
            <label class="form-check-label" for="screenToolsShowHomeButton">
                显示主页按钮
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="screenToolsShowSearchBoxTitle"
                v-model="screenConsole.tools.showSearchBoxTitle"
                @change="ScreenClinkForSave({ tools: { showSearchBoxTitle: screenConsole.tools.showSearchBoxTitle } })">
            <label class="form-check-label" for="screenToolsShowSearchBoxTitle">
                显示搜索栏
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="screenToolsShowBookmarkMenu"
                v-model="screenConsole.tools.showBookmarkMenu"
                @change="ScreenClinkForSave({ tools: { showBookmarkMenu: screenConsole.tools.showBookmarkMenu } })">
            <label class="form-check-label" for="screenToolsShowBookmarkMenu">
                显示收藏栏
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="screenToolsShowDownloadButton"
                v-model="screenConsole.tools.showDownloadButton"
                @change="ScreenClinkForSave({ tools: { showDownloadButton: screenConsole.tools.showDownloadButton } })">
            <label class="form-check-label" for="screenToolsShowDownloadButton">
                显示“下载”按钮
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="screenToolsShowBookmarkMenuButton"
                v-model="screenConsole.tools.showBookmarkMenuButton"
                @change="ScreenClinkForSave({ tools: { showBookmarkMenuButton: screenConsole.tools.showBookmarkMenuButton } })">
            <label class="form-check-label" for="screenToolsShowBookmarkMenuButton">
                显示“收藏夹”按钮
            </label>
        </div>
    </div>
    <div class="row mt-3">

        <div class="col-1  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="radio" name="screenToolsShowBookmarkPos"
                id="screenToolsShowBookmarkPos1" :value=1 v-model="screenConsole.tools.showBookmarkPos"
                @click="ScreenClinkForSave({ tools: { showBookmarkPos: screenConsole.tools.showBookmarkPos } })"
                :disabled="!screenConsole.tools.showBookmarkMenuButton">
            <label class="form-check-label" for="flexRadioDefault2">
                放在浏览器左侧
            </label>
        </div>

        <div class="col-3   d-flex justify-content-start">
            <input class="form-check-input" type="radio" name="screenToolsShowBookmarkPos"
                id="screenToolsShowBookmarkPos2" :value=2 v-model="screenConsole.tools.showBookmarkPos"
                @click="ScreenClinkForSave({ tools: { showBookmarkPos: screenConsole.tools.showBookmarkPos } })"
                :disabled="!screenConsole.tools.showBookmarkMenuButton">
            <label class="form-check-label" for="flexRadioDefault2">
                放在浏览器右侧
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="screenToolsShowRestoreButton"
                v-model="screenConsole.tools.showRestoreButton"
                @change="ScreenClinkForSave({ tools: { showRestoreButton: screenConsole.tools.showRestoreButton } })">
            <label class="form-check-label" for="screenToolsShowRestoreButton">
                显示“网页回收站”按钮
            </label>
        </div>
    </div>
    <div class="row mt-3">

        <div class="col-1  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="radio" name="screenToolsShowRestorePos"
                id="screenToolsShowRestorePos1" :value=1 v-model="screenConsole.tools.showRestorePos"
                @click="ScreenClinkForSave({ tools: { showRestorePos: screenConsole.tools.showRestorePos } })"
                :disabled="!screenConsole.tools.showRestoreButton">
            <label class="form-check-label" for="screenToolsShowRestorePos">
                放在浏览器左侧
            </label>
        </div>

        <div class="col-3   d-flex justify-content-start">
            <input class="form-check-input" type="radio" name="screenToolsShowRestorePos"
                id="screenToolsShowRestorePos2" :value=2 v-model="screenConsole.tools.showRestorePos"
                @click="ScreenClinkForSave({ tools: { showRestorePos: screenConsole.tools.showRestorePos } })"
                :disabled="!screenConsole.tools.showRestoreButton">
            <label class="form-check-label" for="screenToolsShowRestorePos">
                放在浏览器右侧
            </label>
        </div>
    </div>


    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>收藏菜单</strong>
        </div>
        <div class="col-10 d-flex justify-content-start">
            <label class="form-check-label" for="flexCheckChecked">
                显示内容最小宽度为
                <input id="IDS_MORE_SETTING_BOOKMARK_MENU_MIN_WIDTH" type="text" class="weakrtl"
                    v-model="screenConsole.favMenu.minWeidth"
                    @keyup.enter="ScreenClinkForSave({ favMenu: { minWeidth: screenConsole.favMenu.minWeidth } })"
                    style="ime-mode:disabled;width: 50px;height:24px" maxlength="3">
                像素（104-240）
            </label>

        </div>
    </div>


    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>地址栏</strong>
        </div>
        <div class="col-5 d-flex justify-content-start ">
            <div class="col-5   d-flex justify-content-start">
                <input class="form-input" type="checkbox" value="" id="screenAddressEnableRecommend"
                    v-model="screenConsole.address.enableRecommend"
                    @change="ScreenClinkForSave({ address: { enableRecommend: screenConsole.address.enableRecommend } })">
                <label class="form-check-label" for="screenAddressEnableRecommend">
                    启用智能网址（推荐）
                </label>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-input" type="checkbox" value="" id="screenAddressAutoComplete"
                v-model="screenConsole.address.autoComplete"
                @change="ScreenClinkForSave({ address: { autoComplete: screenConsole.address.autoComplete } })">
            <label class="form-label" for="screenAddressAutoComplete">
                启用网址自动补全
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-input" type="checkbox" value="" id="screenAddressCopyPasteHelper"
                v-model="screenConsole.address.copyPasteHelper"
                @change="ScreenClinkForSave({ address: { copyPasteHelper: screenConsole.address.copyPasteHelper } })">
            <label class="form-label" for="screenAddressCopyPasteHelper">
                启用地址栏复制粘贴助手
            </label>
        </div>
    </div>


    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>收藏栏</strong>
        </div>
        <div class="col-5 d-flex justify-content-start ">
            <div class="col-5   d-flex justify-content-start">
                <input class="form-input" type="checkbox" value="" id="screenFavNewTabShowBookmarkBar"
                    v-model="screenConsole.fav.newTabShowBookmarkBar"
                    @change="ScreenClinkForSave({ fav: { newTabShowBookmarkBar: screenConsole.fav.newTabShowBookmarkBar } })">
                <label class="form-check-label" for="screenFavNewTabShowBookmarkBar">
                    隐藏收藏栏后，在新标签页显示收藏
                </label>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>字体大小</strong>
        </div>
        <div class="col-5 d-flex justify-content-start ">
            <div class="col-5   d-flex justify-content-start">
                <input class="form-input" type="checkbox" value="" id="screenFontSizeSystem"
                    v-model="screenConsole.fontSize.system"
                    @change="ScreenClinkForSave({ fontSize: { system: screenConsole.fontSize.system } })">
                <label class="form-check-label" for="screenFontSizeSystem">
                    使用系统字体大小
                </label>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-input" type="checkbox" value="" id="screenFontSizeSelfdes"
                v-model="screenConsole.fontSize.selfdes"
                @change="ScreenClinkForSave({ fontSize: { selfdes: screenConsole.fontSize.selfdes } })">
            <label class="form-label" for="screenFontSizeSelfdes">
                自定义字体大小
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-1 offset-1 d-flex justify-content-start ">
            <select class="form-select bg-light" v-model="screenConsole.fontSize.size"
                style="height: 90%; background-color: gray;" id="fontSize"
                @change="ScreenClinkForSave({ fontSize: { size: screenConsole.fontSize.size } })">
                <option :value=1>小号</option>
                <option :value=2>中号</option>
                <option :value=3>大号</option>
            </select>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>缩放比例</strong>
        </div>
        <div class="col-5 d-flex justify-content-start ">
            <div class="col-5   d-flex justify-content-start">
                <input class="form-input" type="checkbox" value="" id="zoomRatioUseSystemDpi"
                    v-model="screenConsole.zoomRatio.useSystemDpi"
                    @change="ScreenClinkForSave({ zoomRatio: { useSystemDpi: screenConsole.zoomRatio.useSystemDpi } })">
                <label class="form-check-label" for="screenFontSizeSystem">
                    跟随系统缩放比例
                </label>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-input" type="checkbox" value="" id="zoomRatioNotUse"
            v-model="screenConsole.zoomRatio.notUse"
            @change="ScreenClinkForSave({ zoomRatio: { notUse: screenConsole.zoomRatio.notUse } })">
            <label class="form-label" for="screenFontSizeSelfdes">
                不跟随系统缩放比例
            </label>
        </div>
    </div>




</template>

<style>
.IDS_MORE_SETTING_BOOKMARK_MENU_MIN_WIDTH {
    box-sizing: border-box;
    font: inherit;
    padding: 4px;
    color: #444;
    border: 1px solid #e5e5e5;
    width: 50px;
    height: 24px;
}
</style>

<style scoped>
.form-check-input {
    margin-right: 8px; /* 在 input 右侧添加 8px 的边距 */
}
.form-input {
    margin-right: 8px; /* 在 input 右侧添加 8px 的边距 */
}
</style>


<script setup lang="ts">
import { useScreenStore } from '@/store/console/screen';
import { showSaveMsg } from '@/utils/message';
import * as screenApi from '@/api/console/screenConsole'
const screenStore = useScreenStore()
const { screenConsoleState : screenConsole } = storeToRefs(screenStore)



screenApi.getScreenConsole().then(
    (res) => {
        screenStore.updateScreenConsole(res as unknown as ScreenConsoleApiModel)
    }

);

function ScreenClinkForSave(param: ScreenConsoleApiModel) {
    screenApi.updateScreenConsole(param)
    showSaveMsg()
}

</script>



<script lang="ts">
import { computed, defineComponent } from 'vue';
import { ScreenConsoleApiModel } from '@/type/console/screenConsole';
import { storeToRefs } from 'pinia';

export default defineComponent({
    name: 'ScreenConsole',

});

</script>